<template>
    <div>
        <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <div class="form-row">
          <el-form-item label="BOM编号:" :label-width="Eject.formLabelWidth">
            <el-input
              v-model="ruleForm.bomNo"
              autocomplete="off"
              style="width: 180px; height: 30px"
              :readonly="ruleForm.autoGenerate"
              clearable
              @click.native="handleCodeClick"
            />
            <template #prepend>MO</template>
            <el-switch
              width="40"
              v-model="ruleForm.autoGenerate"
              active-text="自动生成"
              active-color="#67C23A"
              @change="handleSwitchChange"
            />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
           
            
          <el-form-item label="BOM主题" prop="bomTheme" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.bomTheme" />
          </el-form-item>
          <el-form-item label="默认BOM" prop="resource">
    <el-radio-group v-model="ruleForm.bomDefault">
      <el-radio label="是"></el-radio>
      <el-radio label="否"></el-radio>
    </el-radio-group>
  </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
            <el-form-item label="版本" prop="bomVersion" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.bomVersion" />
          </el-form-item>
          <el-form-item label="成品类型" prop="bomType" style="flex: 1;">
            <el-select v-model="ruleForm.bomType" placeholder="请选择">
              <el-option label="超能胶水" value="超能胶水" />
              <el-option label="万能胶水" value="万能胶水" />
            </el-select>
          </el-form-item>
          <el-form-item label="成品名称" prop="bomName" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.bomName" />
          </el-form-item>

        </div>
     
        <div class="form-row" style="display: flex; justify-content: space-between;">
         
          <el-form-item label="日产量" prop="dayNum" style="flex: 1;">
            <el-input v-model="ruleForm.dayNum" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="备注" prop="bomNote" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.bomNote" />
          </el-form-item>
          <el-form-item label="BOM配件" prop="wIds" style="flex: 1;">
            <el-input v-model="ruleForm.wIds" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="工艺流程" prop="gIds" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.gIds" />
          </el-form-item>
          <el-form-item label="附件" prop="attachment" style="flex: 1;">
            <el-input v-model="ruleForm.attachment" />
          </el-form-item>
        </div>
       
        <el-form-item>
          <el-button type="primary" @click="submitForm()">
            添加
          </el-button>
          <el-button @click="handleClose()">关闭</el-button>
        </el-form-item>

      </el-form>
      <el-table :data="tableDataW" border style="width:670px;margin-bottom: 20px;" @selection-change="WhandleSelectionChange">
        <el-table-column type="index" label="序号" width="80" />

        <el-table-column prop="materialname" label="物料名称" width="180" />
        <el-table-column prop="inboundNumber" label="数量" width="180" />
        <el-table-column prop="validityDate" label="创建时间" width="180" />
      </el-table>
    </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref, watch } from "vue";
import {useRouter} from 'vue-router'
const router=useRouter();
const tableData = ref([]);
const processList=ref([]);
const ruleFormRef = ref<InstanceType<typeof import('element-plus')['ElForm']>>();
const formSize = ref('default');
const tableDataW = ref([]);
const ruleForm = reactive({
    bomId: 0,
    bomNo: "",
    bomTheme: "",
    bomDefault: "",
    bomVersion: "",
    bomType: "",
    bomName: "",
    dayNum: "",
    bomNote: "",
    wIds: "",
    gIds: "",
    attachment: "",
    isDeleted: false,
    autoGenerate: false, // 是否自动生成
});
const generateCode = () => {
    const timestamp = Date.now(); // 获取精确到毫秒的时间戳
    ruleForm.bomNo = `CS${timestamp}`;
};

const handleSwitchChange = (val: boolean) => {
    ruleForm.autoGenerate = val;
    if (val) {
        generateCode(); // 开启自动生成时立即生成
    } else {
        ruleForm.bomNo = ""; // 关闭时清空编号
    }
};

const handleCodeClick = () => {
    if (ruleForm.autoGenerate) {
        generateCode(); // 点击输入框时重新生成
    }
};
const Eject = reactive({
    dialogFormVisible: false,
    formLabelWidth: "100px",
    title: "",
    Isture: true,
    dialogVisible: false,
    edialogFormVisible:false,
    gongdialogFormVisible:false,
});

const submitForm = async () => {
  
       
           axios({
            url:'http://localhost:5057/api/BOMguan/AddBOMguans',
            method:'post',
            data:ruleForm,
          
           })
           .then((res)=>{
            if(res.data.code==100)
            {
                ElMessage.success("添加成功");
            }
           })
};
const page = reactive({
    PageIndex: 1,
    PageSize: 10,
    totalCount: 0,
    totalPage: 0,
    materialnumber: '',
    materialname: '',
});
onMounted(()=>{
    show();
})
const show = () => {
    axios.get("http://localhost:5056/api/ProductInfo/GetBillingmanagement", { params: page })
        .then((res) => {
            tableData.value = res.data.data;
            page.totalCount = res.data.totalCount;
            page.totalPage = res.data.totalPage;
        })
};

</script>

<style scoped>

</style>